<template>
  <div>
    <!-- 头部组件 -->
    <NavBar leftText="返回" rightText="添加" @addGoods="addGoods()"></NavBar>
    <form action="/">
      <van-search
        v-model="searchValue"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <!-- 搜索内容 -->
    <div v-if="searchResult.length>0">
      <van-list>
        <van-cell v-for="item in searchResult" :key="item.id">
          <div class="search_item">
            <div class="search_item_name">
              <span>{{item.name}}</span>
            </div>
            <div class="search_item_time">
              <span>商品上架时间: {{item.ctime | dateFormat}}</span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <div class="searchHistory" v-else>
      <div class="top">
        <p>搜索历史</p>
        <i class="van-icon van-icon-delete" @click="removeTags()"></i>
      </div>
      <div class="tagList" v-if="searchTags.length>0">
        <van-tag style="margin: 0px 5px;" v-for="(item,index) in searchTags" :key="index">{{item}}</van-tag>
      </div>
      <div v-else>
        <van-divider :style="{ color: '#666', borderColor: '#ccc', padding: '0 16px' }">暂无搜索历史</van-divider>
      </div>
    </div>
    <!-- 底部tab栏  -->
    <TabBar></TabBar>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog } from "vant";
import NavBar from "../components/navBar";
import TabBar from '../components/Tabbar'
// 全局注册
Vue.use(Dialog);
export default {
  components: {
    NavBar,
    TabBar
  },
  data() {
    return {
      // 搜索内容
      searchValue: "",
      // 结果结果
      searchResult: [],
      // 搜索内容标签
      searchTags: []
    };
  },
  created() {},
  methods: {
    // 获取搜索结果
    async onSearch() {
      // 1.获取到输入框的值
      if (!this.searchValue.trim()) {
        // 2.合法性判断
        this.searchValue = "";
        this.searchResult = [];
        this.$toast("请输入搜索内容");
        return;
      }
      this.searchTags.unshift(this.searchValue);
      // 3.检验通过 把输入框的值 发送到后台
      const { data: res } = await this.$http.get("/api/getprodlist");

      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取搜索结果失败");
        return;
      }
      // 4.返回的数据赋值
      this.searchResult = res.message;
    },
    // 取消搜索
    onCancel() {
      this.searchValue = "";
      this.searchResult = [];
    },
    // 清空搜索历史
    removeTags() {
      if (this.searchTags.length === 0) {
        this.$toast("当前没有要删除的搜索记录哦");
        return;
      }
      Dialog.confirm({
        title: "",
        message: "确定清空吗？"
      })
        .then(() => {
          this.searchTags = [];
        })
        .catch(() => {
          // on cancel
        });
    },
    // 点击 导航栏添加按钮
    addGoods() {
      // 编程式导航
      this.$router.push({ path: "/addgoods" });
    }
  }
};
</script>

<style lang="less" scoped>
.search_item {
  display: flex;
  justify-content: space-between;
  .search_item_name {
    span {
    }
  }
  .search_item_time {
    span {
      color: #969799;
    }
  }
}
.searchHistory {
  .top {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
    }
    i {
    }
  }
  .tagList {
    padding: 5px 10px;
  }
}
</style>